import React, { Component } from "react";
import "./style.scss";
import sumitSuccess from "@images/gif/gif-inProcess.gif";
import { InterfaceG } from "@config/Config";
import yhTools from "@tools/yh";
import { Toast, Modal } from "antd-mobile";
import MainLayout from "@component/mainLayout/mainLayout";
export class InProcess extends Component {
	constructor(props) {
		super(props);
		this.state = {
			time: 10, //倒计时
			httpFlag: false, //时候请求查询结果接口
			modal_continue: false, //继续等待结果
			modal_back: false //支付结果返回
		};
		this.timer = null;
	}

	/*******************生命周期 start************************/
	componentDidMount() {
		console.log("this.props.location", this.props.location);
		const { query = {} } = this.props.location;
		this.setState(
			{
				tradeNo: query.tradeNo
			},
			() => {
				this.countDown();
			}
		);
	}
	componentWillUnmount() {
		clearInterval(this.timer);
	}
	/*******************生命周期 end************************/

	/*******************业务方法 start************************/
	/**
	 * @msg: 倒计时
	 * @param {*}
	 * @return {*}
	 */
	countDown() {
		let { time } = this.state;
		this.timer = setInterval(() => {
			if (time < 1) {
				clearInterval(this.timer);
				this.setState({
					modal_continue: true
				});
			} else {
				time--;
				this.setState({
					time
				});
				if (!this.state.httpFlag) {
					this.query_pay_order();
				}
			}
		}, 1000);
	}

	/**
	 * @msg: 获取授信并支付结果接口
	 * @param {*}
	 * @return {*}
	 */
	query_pay_order() {
		const { tradeNo } = this.state;
		let objs = {
			url: InterfaceG.query_pay_order,
			params: {
				tradeNo
			}
		};
		let _that = this;
		this.setState(
			{
				httpFlag: true
			},
			() => {
				yhTools.request(objs).then(res => {
					if (res.code === "0") {
						//订单状态：0-成功，1-失败，2-支付中，3-客户取消订单，-1-初始状态
						const status = res.data.orderStatus;
						if (status === "0") {
							clearInterval(_that.timer);
							Toast.info("支付成功", 2);
							setTimeout(() => {
								yhTools.noticePaySuccess("支付成功");
							}, 2000);
						} else if (status === "1") {
							clearInterval(_that.timer);
							Toast.info("支付失败", 2);
							setTimeout(() => {
								yhTools.noticePayFailed("支付失败");
							}, 2000);
						} else if (status === "3") {
							clearInterval(_that.timer);
							Toast.info("客户取消订单", 2);
							setTimeout(() => {
								yhTools.noticePayCanceled("客户取消订单");
							}, 2000);
						} else if (status === "-1") {
							clearInterval(_that.timer);
							Toast.info("初始状态", 2);
							setTimeout(() => {
								yhTools.noticePayFailed("初始状态");
							}, 2000);
						}
						this.setState({
							httpFlag: false
						});
					} else {
						this.setState({
							httpFlag: false
						});
						Toast.info(res.message, 2);
					}
				});
			}
		);
	}
	/*******************业务方法 end************************/

	/*******************点击事件 start************************/
	/**
	 * @msg: 左上角页面返回
	 * @param {*}
	 * @return {*}
	 */
	handleBack = () => {
		this.setState({
			modal_back: true
		});
	};
	/*******************点击事件 start************************/
	render() {
		const { modal_continue, modal_back, time } = this.state;
		let _pageParams = {
			header: {
				title: "处理中",
				goBackAction: this.handleBack
			},
			isModal: true,
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		return (
			<MainLayout pageParams={_pageParams} handleBack={this.handleBack}>
				<div className="page-inProcess">
					<div className="inProcess-gif-wrap ui-flex ui-flex-justify-center">
						<div className="inProcess-gif">
							<img className="gif-img" src={sumitSuccess} />
							<div className="gif-time">{time}</div>
						</div>
					</div>
					<h3 className="inProcess-title">支付中</h3>
					<div className="inProcess-tips inProcess-tips1">
						签约成功，正在为您支付…
					</div>
					<div className="inProcess-tips inProcess-tips2">
						<span>结果返回前，请勿退出</span>
					</div>
				</div>
				<Modal
					visible={modal_continue}
					transparent
					title="提示"
					footer={[
						{
							text: "我知道了",
							onPress: () => {
								this.setState({
									modal_continue: false
								});
							}
						}
					]}
					afterClose={() => {
						this.setState(
							{
								time: 10
							},
							() => {
								this.countDown();
							}
						);
					}}
				>
					<div>继续为您处理中，请耐心等待……</div>
				</Modal>
				<Modal
					visible={modal_back}
					transparent
					title="提示"
					footer={[
						{
							text: "我知道了",
							onPress: () => {
								this.setState({
									modal_back: false
								});
							}
						}
					]}
				>
					<div>正在等待开通及支付结果返回，请勿返回或重复发起。</div>
				</Modal>
			</MainLayout>
		);
	}
}

export default InProcess;
